<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.go(-1)" />
    <!-- 搜索栏 -->

    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      @input="suggest"
    />
    <!-- 历史记录 -->
    <!-- 内存块盒子 -->
    <van-cell-group v-if="!value">
      <van-cell title="历史记录" />
      <van-cell
        v-for="(item, index) in historyList"
        :key="index"
        :title="item"
      />
    </van-cell-group>
    <!-- 请求块盒子 -->
    <van-cell-group v-else>
      <van-cell
        @click="search(item)"
        v-for="(item, index) in listred"
        :key="index"
        icon="search"
      >
        <div v-html="item.new_arr"></div>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { suggestApi } from '@/Api'
export default {
  data () {
    return {
      value: '',
      list: [],
      listred: [],
      //   historyList 的值是存进内存中的数组,但是如果是第一次搜索,就没有值
      historyList: JSON.parse(window.localStorage.getItem('hm81-history')) || []
    }
  },
  methods: {
    search (item) {
      this.value = item.old_arr
      this.onSearch()
    },
    //   搜索框输入内容触发的事件
    // 判断输入框的内容不为空时再发请求

    async suggest () {
      // 判断输入的内容不为空才发请求

      if (this.value) {
        let res = await suggestApi({
          q: this.value
        })
        console.log(res)

        //   判断如果发送请求返回的第一个数据是null那就把list变成空数组
        if (res.data.data.options[0] === null) {
          this.list = []
        } else {
          this.list = res.data.data.options
          //   console.log(this.list)
          //   返回出来的是颜色变化后的数组
          this.listred = this.list.map(v => {
            let reg = new RegExp(this.value, 'gi')
            return {
              new_arr: v.replace(
                reg,
                `<span style="color:red;">${this.value}</span>`
              ),
              old_arr: v
            }
          })
        }
      }
    },

    //   回车点击搜索按钮时触发
    onSearch () {
      // 保存搜索的关键字作为历史记录
      if (this.value) {
        if (!this.historyList.includes(this.value)) {
          this.historyList.push(this.value)
          window.localStorage.setItem(
            'hm81-history',
            JSON.stringify(this.historyList)
          )
        }
      }

      this.$router.push({
        name: 'serp',
        query: {
          ser: this.value
        }
      })
    },
    // 点击取消触发
    onCancel () {}
  }
}
</script>

<style></style>
